import React, {Component} from 'react'
import {ScrollView, StatusBar, StyleSheet, View, Text} from 'react-native'
import ScrollableTabView, {DefaultTabBar,} from 'react-native-scrollable-tab-view'
import {connect} from 'react-redux'
import Spinner from 'react-native-loading-spinner-overlay'
import { PullView } from '../../widgets'
import { createAction, NavigationActions } from '../../utils'
import screen from '../../utils/screen'
import color from '../../utils/color'
import First from './First'
import Second from './Second'


@connect(({ consultant, loading }) => ({ ...consultant, isLoading: loading.models.consultant }))
export default class extends Component {
  static navigationOptions = {
    title: '在线顾问',
    headerStyle: {
      backgroundColor: color.theme,
      elevation: 0,
      shadowOpacity: 0,
    },
    headerTitleStyle: {
      color: 'white',
      fontSize: screen.pxToDp(30),
      marginLeft: screen.pxToDp(26),
    },
  }

  constructor(props) {
    super(props)
  }

  componentWillMount() {
    this.props.dispatch(createAction("consultant/initState")({}))
  }

  render() {
    const {  mainTime, isLoading } = this.props
    return (
      <View style={styles.container}>
        <StatusBar backgroundColor={color.theme} />
        <Spinner visible={isLoading} />
        <ScrollableTabView
          tabBarBackgroundColor={color.theme}
          tabBarActiveTextColor="#00195e"
          tabBarInactiveTextColor="#268db8"
          tabBarTextStyle={{
            fontSize: screen.pxToDp(30),
            fontWeight: 'normal',
          }}
          renderTabBar={() => <DefaultTabBar />}
        >
          <View style={{flex: 1}} tabLabel="顾问咨询">
            <First navigation={this.props.navigation} />
          </View>
          <View style={{flex: 1}} tabLabel="专项咨询">
            <Second navigation={this.props.navigation}/>
          </View>
        </ScrollableTabView>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
})
